/*
 * @Author: xiaosihan 
 * @Date: 2023-08-10 11:24:00 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-01-09 01:09:00
 */

import designEditor from "@/editorComponent/designEditor";
import editorStore from "@/editorComponent/editorStore";
import FabricText from "@/myFabric/FabricText";
import { Input, InputNumber, Slider, Tooltip } from "antd";
import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import boldSVG from "./bold.svg";
import bold_activeSVG from "./bold_active.svg";
import styles from "./toolTextStroke.module.less";
import { SketchPicker } from "react-color";
import ColorPick from "../ColorPick/ColorPick";
import { clamp, throttle } from "lodash";
import nameNumStore from "@/editorComponent/LeftMenu/NameNum/nameNumStore";

interface Iprops {
}

// 字体描边
export default function ToolTextStroke() {

  const showTop = useRef(false);
  const [visible, setVisible] = useState(false);
  const [disable, setDisable] = useState(false);
  const [strokeColor, setStrokeColor] = useState("#ffffff");
  const [strokeWidth, setStrokeWidth] = useState(0);

  useEffect(() => autorun(() => {
    const { activeObjectId, lock } = editorStore;
    const { step } = nameNumStore;
    const activeObject = designEditor.fabricCanvas.getActiveObject();
    if (activeObjectId && activeObject && activeObject.type === "i-text") {
      const { stroke, strokeWidth = 0 } = activeObject as FabricText;
      const lockNameNum = (["name", "num"].includes(activeObject.name || "") && step === 3);
      setStrokeColor(stroke || "ffffff");
      setStrokeWidth(strokeWidth);
      setVisible(true);
      setDisable(lock || lockNameNum);
    } else {
      setVisible(false);
    }
  }), []);

  return (
    <>
      <div
        className={clsx(styles.toolTextStrokeWidth, visible && styles.visible, disable && styles.disable)}
      >
        <span className={styles.lable} >描边</span>
        <Slider
          className={styles.slider}
          min={0}
          max={10}
          value={strokeWidth}
          onChange={v => {
            setStrokeWidth(v);
            designEditor.setStrokeWidth(v);
          }}
        />
        <Input
          size="small"
          key={strokeWidth}
          className={styles.input}
          defaultValue={strokeWidth}
          onPressEnter={e => {
            const v = Number((e.target as HTMLInputElement).value);
            setStrokeWidth(v);
            designEditor.setStrokeWidth(v);
          }}
          onBlur={e => {
            const v = Number((e.target as HTMLInputElement).value);
            setStrokeWidth(v);
            designEditor.setStrokeWidth(v);
          }}
          onWheel={e => {
            const value = clamp((strokeWidth - Math.sign(e.deltaY)), 0, 10);
            setStrokeWidth(value);
            designEditor.setStrokeWidth(value);
          }}
        />
      </div>

      <Tooltip
        title={
          <div className={styles.color_picker} >
            <SketchPicker
              color={strokeColor}
              className={styles.SketchPicker}
              onChange={(color: any) => {
                designEditor.setStrokeColor(color.hex);
                setStrokeColor(color.hex);
              }}
            />
            <ColorPick />
          </div>
        }
        onOpenChange={open => {
          showTop.current = open;
        }}
        trigger={['click']}
        color={"#00000000"}
        placement="bottom"
      >
        <div className={clsx(styles.toolTextStrokeColor, visible && styles.visible, disable && styles.disable)} >
          <span className={styles.colorBlock} style={{ backgroundColor: strokeColor }} ></span>
        </div>

      </Tooltip>
    </>
  );

}